import DialogBox from "@/components/DialogBox";
import { FormInstance, dayjs } from "element-plus";
import { getCurrentInstance, defineComponent, PropType, ComponentInternalInstance } from "vue";
import { Device } from "./../../../../api/interface/iot";
export interface SaveToProduct {
	//源对象标识
	id: string;
	//源对象名称
	name: string;
	//产品类型
	type: string;
	model: string;
}
export default defineComponent({
	props: {
		width: String,
		title: String,
		formData: {
			type: Object as PropType<SaveToProduct>,
			default() {
				return {};
			}
		}
	},
	emits: ["submit"],
	setup(props, { attrs, emit }) {
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		const formData = reactive<Device.ReqProduct>({});
		const formRef = ref<FormInstance>();
		watchEffect(() => {
			formData.id = props.formData.id;
			//设置另存为产品的参数
			formData.productModel = (props.formData.model || props.formData.id) + "_" + dayjs().format("YYYYMMDDHHmmss");
			formData.productName = props.formData.name + "_copy";
			formData.deviceType = props.formData.type;
		});

		const submitFrom = () => {
			formData.productModel = formData.productModel.trim();
			emit("submit", formData);
		};
		return () => {
			return (
				<DialogBox {...attrs} width={props.width || "700px"} title={props.title} onConfirm={() => submitFrom()}>
					<el-form ref={formRef} label-width="100px" size="large">
						<el-form-item label={proxy?.$t("product.copy_form_label.product_name")}>
							<el-input v-model={formData.productName} />
						</el-form-item>
						<el-form-item label={proxy?.$t("product.copy_form_label.product_model")}>
							<el-input v-model={formData.productModel} />
						</el-form-item>
					</el-form>
				</DialogBox>
			);
		};
	}
});
